// USER VARIABLES SECTION

@accent: orange; // Accent Color
@fontsize: 16px; // Body Font Size
@textcolor: #333; // Text Color
@system: -apple-system, BlinkMacSystemFont, Arial, sans-serif; // System Font Family
@roboto: Roboto, sans-serif; // Roboto Font Family

// IMPORT SECTION

@import '/node_modules/bootstrap/dist/css/bootstrap-reboot.min.css'; // Bootstrap Reboot collection
// @import '/node_modules/bootstrap/dist/css/bootstrap-grid.min.css'; // Optional Bootstrap Grid

// FONTS LOAD SECTION

.font(@fname, @fstyle, @fweight, @furl) {
	@font-face {
		font-family: @fname;
		font-style: @fstyle;
		font-weight: @fweight;
		// font-display: swap; // Uncomment to initially display system fonts
		src: local(@fname), url(@furl) format('woff2');
	}
}

.font('Roboto', normal, 400, '../fonts/roboto-regular-webfont.woff2');
.font('Roboto', italic, 400, '../fonts/roboto-italic-webfont.woff2');
.font('Roboto', normal, 700, '../fonts/roboto-bold-webfont.woff2');
.font('Roboto', italic, 700, '../fonts/roboto-bolditalic-webfont.woff2');

// GENERAL DOCUMENT STYLES

::placeholder {
	color: #666;
}

::selection {
	background-color: @accent;
	color: #fff;
}

input, textarea {
	outline: none;
	&:focus:required:invalid { border-color: red }
	&:required:valid { border-color: green }
}

body {
	font-family: @roboto;
	font-size: @fontsize;
	min-width: 320px;
	position: relative;
	line-height: 1.65;
	overflow-x: hidden;
	color: @textcolor;
}
